<template>
    <div class="subpage supply-order-container">
        <ul class="order-tabs">
            <li v-for="(item, index) in orderTabList" :key="index" :class="index == activeTab ? 'order-tab-active' : ''" @click="changeOrderList(item.index, item.type)">{{item.name}}</li>
        </ul>
        <div class="order-list-container">
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                <van-list
                    v-model="loading"
                    :immediate-check="false"
                    :finished="finished"
                    finished-text="已加载全部了哦～"
                    @load="onLoadMore"
                    v-if="listData.length > 0"
                >
                    <SupplyOrderListBase :listData="listData"></SupplyOrderListBase>
                </van-list>
                <div class="no-data-box" v-else>
                    <img src="@/assets/img/home_img27.png" alt="" v-show="showNoInfo">
                    <span v-show="showNoInfo">{{noDataText}}</span>
                </div>
            </van-pull-refresh>
            
        </div>
    </div>
</template>

<script>
import { List, PullRefresh } from 'vant';
import SupplyOrderListBase from '../../../components/orderComPonents/SupplyOrderListBase.vue';
export default {
    components: {
        [List.name]: List,
        [PullRefresh.name]: PullRefresh,
        SupplyOrderListBase
    },
    data() {
        return {
            orderTabList: [
                {
                    name: '全部',
                    type: null,
                    index: 0
                },
                {
                    name: '待收款',
                    type: 2,
                    index: 1
                },
                {
                    name: '已完成',
                    type: 5,
                    index: 2
                },
                // {
                //     name: '已取消',
                //     type: 99,
                //     index: 3
                // }
            ],
            activeTab: 0,
            orderType: null,
            noDataText: '您还没有供货记录哦，赶快去供货吧！',
            listData: [],
            isLoading: false,
            loading: false,
            finished: false,
            pageIndex: 1,
            pageSize: 10,
            showNoInfo: false
        }
    },
    created() {
        this.getOrderList()
    },
    methods: {
        resetParams() {
            this.listData = [];
            this.loading = false;
            this.finished = false;
            this.pageIndex = 1;
            this.showNoInfo = false;
        },
        changeOrderList(index, type) { //切换订单状态
            if(this.activeTab == index){
                return;
            }
            this.activeTab = index;
            this.orderType = type;
            this.isLoading = true;
            this.onRefresh()
            switch(index) {
                case 0:
                    this.noDataText = '您还没有供货记录哦，赶快去供货吧！';
                    break;
                case 1:
                    this.noDataText = '您没有待收款供货记录哦～';
                    break;
                case 2:
                    this.noDataText = '您没有已完成供货记录哦～';
                    break;
                case 3:
                    this.noDataText = '您没有已取消供货记录哦～';
                    break;
            }
        },
        getOrderList() { //获取订单数据
            let getData = {
                pgCt: this.pageIndex,
                pgSz: this.pageSize,
                type: this.orderType
            }
            let apiUrl = this.pageIndex > 1 ? '/api/supply/supply_order_list?noLoading' : '/api/supply/supply_order_list';
            this.$api.get(apiUrl, getData)
                .then((res) => {
                    this.showNoInfo = res.data.total > 0 ? false : true;
                    this.listData = this.listData.concat(res.data.records);
                    if(this.pageIndex > 1 && res.data.records.length < this.pageSize){
                        this.finished = true;
                    }
                })
        },
        onLoadMore() {
            // 异步更新数据
            setTimeout(() => {
                this.pageIndex++;
                this.getOrderList()
                // 加载状态结束
                this.loading = false;
            }, 500);
        },
        onRefresh() { //下拉刷新
            this.resetParams()
            setTimeout(() => {
                this.getOrderList();
                this.isLoading = false;
            }, 500);
        }
    }
}
</script>

<style lang="scss" scoped>
    .supply-order-container {
        .order-tabs {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9;
            width: 100%;
            height: 48px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 0 6px;
            box-sizing: border-box;
            border-bottom: 1px solid #f2f2f2;
            background-color: #fff;
            li {
                padding: 0 4px;
                box-sizing: border-box;
                height: 48px;
                line-height: 48px;
                font-size: 16px;
                color: #5D6164;
                &.order-tab-active {
                    position: relative;
                    color: #31BC8D;
                    &::after {
                        content: "";
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        height: 2px;
                        background-color: #31BC8D;
                    }
                }
            }
        }
        .order-list-container {
            width: 100%;
            height: calc(100vh - 48px);
            margin-top: 48px;
            overflow-y: scroll;
            .no-data-box {
                width: 100%;
                height: calc(100vh - 48px);
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                text-align: center;
                color: #999;
                img {
                    width: 68px;
                    height: 104px;
                    object-fit: cover;
                    margin-top: -90px;
                    margin-bottom: 14px;
                }
            }
        }
    }
</style>